<template>
  <div>
    <!--设备管理-->
    <div class="wei-container">
      <el-row>
        <el-col :span="10">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>
                设备状态
              </span>
            </div>
            <el-col :span="10">
              <div style="width: auto;height: 225px;margin-top: 2px; margin-left: -34px;" id="echarts2">
              </div>
            </el-col>
            <el-col :span="14">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="设备状态" width="150">
                </el-table-column>
                <el-table-column prop="name" label="设备数量" width="170">
                </el-table-column>
                <el-table-column prop="address" label="占比">
                </el-table-column>
              </el-table>
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card class="box-card2">
            <div slot="header" class="clearfix">
              <span>
                常用功能
              </span>
            </div>
            <div class="function-card" v-for="(item, index) in functions" :key="index">
              <div class="icon">icon</div>
              <div>{{ item }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--办事统计-->
    <div class="wei-container2">
      <el-card>
        <el-tabs v-model="activeTab" type="card">
          <div class="right-buttons">
            <el-button type="text">今天</el-button>
            <el-button type="text">本周</el-button>
            <el-button type="text">本月</el-button>
          </div>
          <el-tab-pane label="代办事项统计" name="first">
            <div class="grid-container">
              <el-card v-for="(item, index) in tasks" :key="index" class="grid-item">
                <div class="task-name">{{ item.name }}</div>
                <div class="task-count">{{ item.count }}</div>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的代办事项" name="second">
            <!-- 其他内容 -->
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!--今日报修-->
    <div class="wei-container3">
      <el-card class="box-card3">
        <div slot="header" class="clearfix">
          <span>今日报修</span>
        </div>
        <div style="width: auto;height: 225px;margin-top: -15px; margin-left: -900px;" id="echarts3">
        </div>
        <div class="wei-container4">
          <el-card v-for="(item, index) in cards" :key="index" class="grid-item2">
            <i :class="item.icon" :style="{ fontSize: '32px', color: item.color, marginLeft: '-80px' }"></i>
            <div class="task-name2">{{ item.title }}</div>
            <div class="task-count2">{{ item.count }}</div>
          </el-card>
        </div>
      </el-card>
    </div>
    <!--报修统计-->
    <div class="wei-container2">
      <el-card class="box-card4">
        <div slot="header" class="clearfix">
          <span>报修统计</span>
          <div style="float: right;">
            <el-button type="text" @click="dian2">最近7天</el-button>
            <el-button type="text" @click="dian">最近30天</el-button>
            <el-button type="text" @click="dian3">最近一年</el-button>
          </div>
        </div>
        <div style="width: 1500px;height: 400px;margin-top: -49px; margin-left: -110px;" id="echarts4">
        </div>
      </el-card>
    </div>
    <!--保养任务-->
    <div class="wei-container5">
      <el-card class="box-card5">
        <div slot="header" class="clearfix">
          <span>保养任务</span>
          <div style="float: right;">
            <el-button type="text" @click="dian2">今天</el-button>
            <el-button type="text" @click="dian">本周</el-button>
            <el-button type="text" @click="dian3">本月</el-button>
          </div>
        </div>
        <el-row>
          <el-col :span="10">
            <div style="width: auto;height: 300px;margin-top: -15px; margin-left: -180px; z-index: 1;" id="echarts5">
            </div>
            <div class="status-list">
              <div class="status-item" v-for="status in statuses" :key="status.name">
                <el-badge :value="status.dot" class="status-dot" :style="{ backgroundColor: status.color }"></el-badge>
                {{ status.name }}
              </div>
            </div>
          </el-col>
          <el-col :span="10">
            <div style="width: auto;height: 250px;margin-top: 0px; margin-left: -422px;" id="echarts6">
            </div>
            <div style="margin-left: 6px; margin-top: -9px;">
              <p style="size: 32;">任务总数：50</p>
            </div>
          </el-col>
          <el-col :span="10">
            <div style="width: 300px; margin-top: -275px; margin-left: 270px;">
              <div class="status-icons2">
                <div class="status-item2" v-for="status in statuses2" :key="status.name">
                  <div class="icon2" :style="{ backgroundColor: status.color }">
                    <i :class="status.icon"></i>
                  </div>
                  <div class="details2">
                    <div class="name2">{{ status.name }}</div>
                    <div class="count2">{{ status.count }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!--巡检任务-->
    <div class="wei-container5">
      <el-card class="box-card5">
        <div slot="header" class="clearfix">
          <span>巡检任务</span>
          <div style="float: right;">
            <el-button type="text" @click="dian2">今天</el-button>
            <el-button type="text" @click="dian">本周</el-button>
            <el-button type="text" @click="dian3">本月</el-button>
          </div>
        </div>
        <el-row>
          <el-col :span="10">
            <div style="width: auto;height: 300px;margin-top: -15px; margin-left: -180px; z-index: 1;" id="echarts7">
            </div>
            <div class="status-list">
              <div class="status-item" v-for="status in statuses" :key="status.name">
                <el-badge :value="status.dot" class="status-dot" :style="{ backgroundColor: status.color }"></el-badge>
                {{ status.name }}
              </div>
            </div>
          </el-col>
          <el-col :span="10">
            <div style="width: auto;height: 250px;margin-top: 0px; margin-left: -422px;" id="echarts8">
            </div>
            <div style="margin-left: 6px; margin-top: -9px;">
              <p style="size: 32;">任务总数：50</p>
            </div>
          </el-col>
          <el-col :span="10">
            <div style="margin-top: -271px; margin-left: 270px; width: 400px; ">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="设备状态" width="150">
                </el-table-column>
                <el-table-column prop="name" label="设备数量" width="170">
                </el-table-column>
                <el-table-column prop="address" label="占比">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- /**仓库状态/系统信息 */-->
    <div class="wei-container">
      <el-row gutter="20">
        <el-col :span="8">
          <el-card shadow="hover" style="margin-left: 20px; margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>库存状态</span>
            </div>
            <el-row>
              <el-col :span="12" class="status">
                <svg-icon icon-class="sx" style="width: 160px; height: 229px;" />
                <div class="status-info">
                  <div class="status-type">2种</div>
                  <div class="status-desc">高于上限</div>
                </div>
              </el-col>
              <el-col :span="12" class="status">
                <svg-icon icon-class="xiaxian" style="width: 160px; height: 229px;" />
                <div class="status-info">
                  <div class="status-type">5种</div>
                  <div class="status-desc">低于下限</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card shadow="hover" style="width: 872px;margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>系统消息</span>
              <el-link type="primary" href="#" style="margin-top: -4px;margin-left: 660px;">查看更多</el-link>
            </div>
            <el-table :data="messages" border>
              <el-table-column prop="id" label="#" width="50"></el-table-column>
              <el-table-column prop="status" label="状态" width="50">
                <template slot-scope="scope">
                  <span class="status-dot"
                    :class="{ 'red': scope.row.status === 'error', 'green': scope.row.status === 'info' }"></span>
                </template>
              </el-table-column>
              <el-table-column prop="message" label="消息"></el-table-column>
              <el-table-column prop="type" label="类型" width="100"></el-table-column>
              <el-table-column prop="date" label="时间" width="180"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'echarts2',
  name2: 'echarts3',
  name3: 'echarts4',
  name4: 'echarts5',
  name5: 'echarts6',
  name6: 'echarts7',
  name7: 'echarts8',
  data() {

    return {
      messages: [
        { id: 1, status: 'info', message: '您有待审核保养计划，请及时处理', type: '审核消息', date: '2024-11-25 04:46:26' },
        { id: 2, status: 'info', message: '您有待审核巡检计划，请及时处理', type: '审核消息', date: '2024-11-25 04:46:26' },
        { id: 3, status: 'info', message: '您有待审核点检计划，请及时处理', type: '审核消息', date: '2024-11-25 04:46:26' },
        { id: 4, status: 'info', message: '您有备件领用申请，请及时处理', type: '审核消息', date: '2024-11-25 04:46:26' },
        { id: 5, status: 'error', message: 'XX设备出现故障，申请了报修', type: '报修消息', date: '2024-11-25 04:46:26' },
        { id: 6, status: 'error', message: '备件025，库存不足，目前库存10件', type: '库存消息', date: '2024-11-25 04:46:26' }
      ],
      statuses2: [
        { name: '待执行', icon: 'el-icon-document', color: '#506ABC', count: 9 },
        { name: '保持中', icon: 'el-icon-document', color: '#EE6666', count: 9 },
        { name: '逾期', icon: 'el-icon-document', color: '#FAC858', count: 9 },
        { name: '未执行', icon: 'el-icon-document', color: '#70BBD8', count: 9 },
        { name: '已完成', icon: 'el-icon-document', color: '#91CC75', count: 9 }
      ],
      //保养执行状态
      statuses: [
        { name: '待执行', color: '#506ABC' },
        { name: '保养中', color: '#EE6666' },
        { name: '逾期', color: '#FAC858' },
        { name: '未执行', color: '#70BBD8' },
        { name: '已完成', color: '#91CC75' }
      ],
      qi: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
      qi2: ["1", "2", "3", "4", "5", "6", "7"],
      yue: ["1", "2", "3", "4", "5", "6", "7",
        "8", "9", "10", "11", "12", "13", "14",
        "15", "16", "17", "18", "19", "20", "21",
        "22", "23", "24", "25", "26", "27", "28",
        "29", "30"
      ],
      yue2: ["1", "2", "3", "4", "5", "2", "3",
        "1", "2", "3", "4", "5", "2", "3",
        "1", "2", "3", "4", "5", "2", "3",
        "1", "2", "3", "4", "5", "2", "3",
        "1", "2",],
      nian: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      nian2: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
      activeName: 'second',
      cards: [
        { title: '工单总数', count: 8, icon: 'el-icon-document', color: '#0099FF' },
        { title: '未派工', count: 8, icon: 'el-icon-edit', color: '#506ABC' },
        { title: '待接单', count: 8, icon: 'el-icon-time', color: '#EE6666' },
        { title: '待执行', count: 8, icon: 'el-icon-share', color: '#FAC858' },
        { title: '维修中', count: 8, icon: 'el-icon-setting', color: '#70BBD8' },
        { title: '待验证', count: 8, icon: 'el-icon-setting', color: '#91CC75' },
        { title: '已完成', count: 8, icon: 'el-icon-setting', color: '#5AD8A6' },
      ],
      activeTab: 'first',
      tasks: [
        { name: '维修工单', count: 5 },
        { name: '故障报修审核', count: 2 },
        { name: '采购审核', count: 0 },
        { name: '维修验收', count: 5 },
        { name: '保养验收', count: 5 },
        { name: '巡检计划审核', count: 2 },
        { name: '巡检任务', count: 1 },
        { name: '点检计划审核', count: 0 },
        { name: '点检任务', count: 4 },
        { name: '保养计划审核', count: 6 },
        { name: '保养任务', count: 7 },
        { name: '领用审核', count: 7 },
      ],
      functions: [
        '故障报修',
        '设备维修',
        '新增设备',
        '设备保养',
        '新增备件',
        '备件领用',
        '备件采购',
        '备件入库',
        '备件出库'
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '35%'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '35%'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '35%'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '35%'
      }],
      // option配置设备状态
      option: {
        title: {
          text: '圆环图的例子',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            data: [
              {
                value: 335,
                name: '维修中'
              },
              {
                value: 234,
                name: '报废'
              },
              {
                value: 154,
                name: '停役'
              }, {
                value: 158,
                name: '故障'
              }, {
                value: 148,
                name: '正常运行'
              }
            ],
            radius: ['50%', '90%']
          }
        ]
      },
      //今日报修视图
      option2: {
        title: [{
          text: '圆环图的例子',
          left: 'center',
          top: 'center'
        },
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '25%',
          left: '56%',
          orient: 'vertical',
        },
        series: [
          {
            name: '东捷设备管理',
            type: 'pie',
            radius: ['50%', '90%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },

            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '为派工', itemStyle: { color: '#506ABC' } },
              { value: 735, name: '维修中', itemStyle: { color: '#EE6666' } },
              { value: 580, name: '待执行', itemStyle: { color: '#FAC858' } },
              { value: 484, name: '待验证', itemStyle: { color: '#70BBD8' } },
              { value: 300, name: '待接单', itemStyle: { color: '#91CC75' } }
            ]
          }
        ]
      },
      //报修统计7天
      option3: {
        xAxis: {
          data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {},
        grid: {
          height: 260,
          with: 300,

        },
        series: [{
          type: 'bar',
          //设置柱状图大小
          barWidth: '40%',
          //设置柱状图渐变颜色
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#1268f3" // 0% 处的颜色
              }, {
                offset: 0.6,
                color: "#08a4fa" // 60% 处的颜色
              }, {
                offset: 1,
                color: "#01ccfe" // 100% 处的颜色
              }], false)
            }
          },
          data: ["1", "2", "3", "4", "5", "6", "7"],
        }]
      },
      //保养任务
      option4: {
        title: {
          text: '圆环图的例子',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            data: [
              {
                value: 335,
                name: '待执行',
                itemStyle: { color: '#506ABC' }
              },
              {
                value: 234,
                name: '保养中',
                itemStyle: { color: '#EE6666' }
              },
              {
                value: 154,
                name: '逾期',
                itemStyle: { color: '#FAC858' }
              }, {
                value: 158,
                name: '未执行',
                itemStyle: { color: '#70BBD8' }
              }, {
                value: 148,
                name: '已完成',
                itemStyle: { color: '#91CC75' }
              }
            ],
            radius: ['40%', '70%']
          }
        ]
      },
      //保养任务完成度
      option5: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '任务完成率',
            type: 'pie',
            radius: ['70%', '85%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: '80%\n任务完成率',
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            data: [
              { value: 80, name: '完成', itemStyle: { color: '#91CC75' } },
              { value: 20, name: '未完成', itemStyle: { color: '#dfe5e7' } }
            ]
          }
        ]
      },
      //巡检任务
      option6: {
        title: {
          text: '圆环图的例子',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            data: [
              {
                value: 335,
                name: '待执行',
                itemStyle: { color: '#506ABC' }
              },
              {
                value: 234,
                name: '保养中',
                itemStyle: { color: '#EE6666' }
              },
              {
                value: 154,
                name: '逾期',
                itemStyle: { color: '#FAC858' }
              }, {
                value: 158,
                name: '未执行',
                itemStyle: { color: '#70BBD8' }
              }, {
                value: 148,
                name: '已完成',
                itemStyle: { color: '#91CC75' }
              }
            ],
            radius: ['40%', '70%']
          }
        ]
      },
      //巡检任务完成度
      option7: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '任务完成率',
            type: 'pie',
            radius: ['70%', '85%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: '80%\n任务完成率',
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            data: [
              { value: 80, name: '完成', itemStyle: { color: '#91CC75' } },
              { value: 20, name: '未完成', itemStyle: { color: '#dfe5e7' } }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.echartsInit()
  },
  methods: {
    dian() {
      this.option3.xAxis.data = this.yue
      this.option3.series[0].data = this.yue2
      this.echartsInit()
    },
    dian2() {
      this.option3.xAxis.data = this.qi
      this.option3.series[0].data = this.qi2
      this.echartsInit()
    },
    dian3() {
      this.option3.xAxis.data = this.nian
      this.option3.series[0].data = this.nian2
      this.echartsInit()
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }, echartsInit() {
      // 在生命周期中挂载
      echarts.init(document.getElementById('echarts2')).setOption(this.option)
      echarts.init(document.getElementById('echarts3')).setOption(this.option2)
      echarts.init(document.getElementById('echarts4')).setOption(this.option3)
      echarts.init(document.getElementById('echarts5')).setOption(this.option4)
      echarts.init(document.getElementById('echarts6')).setOption(this.option5)
      echarts.init(document.getElementById('echarts7')).setOption(this.option6)
      echarts.init(document.getElementById('echarts8')).setOption(this.option7)
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
}

</script>
<style>
.dashboard {
  padding: 20px;
}

.status {
  text-align: center;
  margin-top: 20px;
}

.status-icon {
  width: 50px;
  height: 50px;
}

.status-info {
  margin-top: 10px;
}

.status-type {
  font-size: 20px;
  font-weight: bold;
}

.status-desc {
  color: #777;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-dot.red {
  background-color: red;
}

.status-dot.green {
  background-color: green;
}

/**保养巡检样式 */
.status-icons2 {
  display: flex;
  width: 446px;
  display: -ms-flexbox;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  /* margin-top: -269px;
  margin-left: 242px; */
  /* z-index: 1; */
}

.status-item2 {
  width: 100px;
  text-align: center;
}

.icon2 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 auto 10px;
  font-size: 28px;
}

.details2 {
  font-size: 14px;
  color: #444;
}

.name2 {
  margin-bottom: 5px;
}

.count2 {
  font-weight: bold;
}

/**保养状态样式 */
.status-list {
  display: flex;
  gap: 20px;
  font-size: 14px;
  margin-top: -10px;
}

.status-item {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.wei-container {
  width: 1376px;
  /* margin-top: 20px; */
  margin-left: 20px;
}

.wei-container2 {
  width: 1314px;
  margin-top: 17px;
  margin-left: 40px;
}

.wei-container3 {
  width: 1314px;
  margin-top: 17px;
  margin-left: 40px;
}

.wei-container4 {
  margin-top: -205px;
  margin-left: 450px;
}

.wei-container5 {
  width: 1314px;
  margin-top: 17px;
  margin-left: 40px;
}

.wei-container6 {
  width: 1376px;
  /* margin-top: 20px; */
  margin-left: 20px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 860px;
  height: 350px;
  margin-left: 20px;
  margin-top: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card2 {
  width: 400px;
  height: 350px;
  margin-left: 360px;
  margin-top: 20px;
}

.box-card3 {
  width: 1316px;
  height: 320px;
  margin-left: 0px;
  margin-top: 20px;
}

.box-card4 {
  width: 1316px;
  height: 400px;
  margin-left: 0px;
  margin-top: 20px;
}

.box-card5 {
  width: 1316px;
  height: 400px;
  margin-left: 0px;
  margin-top: 20px;
}

.function-card {
  text-align: center;
  margin: 22px;
  display: inline-block;
}

.icon {
  width: 75px;
  height: 50px;
  margin-top: -28px;
  border: 2px solid #dcdfe6;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

/*/* 底部按钮 */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grid-item {
  /* flex: 1 0 16%; */
  margin-bottom: 2px;
  text-align: center;
  border: 2px solid #B4E7D4;
  border-radius: 4px;
  padding: 0px;
  box-sizing: border-box;
  width: 200px;
  height: 70px;
}

.grid-item2 {
  margin-bottom: 39px;
  text-align: center;
  border: 2px solid #FFFFFF;
  border-radius: 4px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 160px;
  height: 70px;
  float: left;
  margin-left: 40px;
}

.task-name {
  font-size: 18px;
  text-align: left;
  color: #999999;
}

.task-count {
  font-size: 18px;
  color: #606266;
  margin-top: -20px;
  margin-left: 147px;
}

.task-name2 {
  font-size: 11px;
  margin-top: -5px;
  margin-left: 33px;
  color: #0BB27A;
}

.task-count2 {
  font-size: 18px;
  color: #606266;
  margin-top: -45px;
  margin-left: 16px;
}

.right-buttons2 {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
</style>
